---
title: Steps
description: Step components built with Tailwind CSS v4. These responsive, customizable step indicators are perfect for onboarding, progress tracking, and multi-step forms in web applications. Optimized for accessibility, SEO, and mobile usability.
emoji: 🪜
wrapper: h-[200px]
container: p-6 max-w-3xl mx-auto
terms:
  - step
  - progress
  - indicator
components:
  - { title: 'Title, icon and progress bar' }
  - { title: 'Title, step/total and progress bar' }
  - { title: 'Title, check icon and progress bar' }
  - { title: 'Title, step and closed completed steps, with highlighted current step' }
  - { title: 'Grouped with title and description, with highlighted current step' }
  - { title: 'Timeline with title, with highlighted current step' }
---

# Step Components

<p>{frontmatter.description}</p>

<CollectionList componentsData={componentsData} />
